<template>
  <pu-bpmn-design ref="cptFlowDesign"
                   @select-assignee="$message.warning('选择分配人事件')"
                   @select-user="$message.warning('请求选择人员事件')"
                   @select-role="$message.warning('请求选择角色事件')"
                   @select-dept="$message.warning('请求选择部门事件')"
                   @select-post="$message.warning('请求选择岗位事件')"
                   style="height: 100vh;">
<!--    <template slot="toolbar-left">
      <el-button icon="el-icon-view" type="danger" @click="getModelData">测试获取流程模型信息</el-button>
      <el-button icon="el-icon-view" type="danger" @click="getXml">测试获取流程xml</el-button>
    </template>
    <template slot="toolbar-right">
      <el-button icon="el-icon-view" type="danger" @click="getBpmnModeler">测试获取流程模型对象</el-button>
    </template>-->
<!--    <template slot="toolbar">
      <el-button icon="el-icon-view" type="danger" @click="getBpmnModeler">测试获取流程模型对象</el-button>
    </template>-->
  </pu-bpmn-design>
</template>

<script>
import CptFlowDesign from '../package/main.vue'

export default {
  name: 'App',
  components: {
    CptFlowDesign
  },
  methods: {
    getModelData() {
      this.$message.success("已打印在浏览器console")
      console.log(this.$refs.cptFlowDesign.getModelData());
    },
    getBpmnModeler() {
      this.$message.success("已打印在浏览器console")
      console.log(this.$refs.cptFlowDesign.getBpmnModeler());
    },
    getXml() {
      this.$message.success("已打印在浏览器console")
      this.$refs.cptFlowDesign.getXml().then(xml => {
        console.log(xml);
      });
    }
  }
}
</script>

<style lang="scss">


</style>
